<template>
  <!-- 交付管理 -->
  <a-card
    :width="1000"
  >
    <table class="delivery-table">
      <tr>
        <th colspan="4">交车信息</th>
      </tr>
      <tr>
        <td>合同编号</td>
        <td style="min-width: 100px">{{ model.contractNo }}</td>
        <td style="width: 220px">订单号</td>
        <td>{{ model.orderNumber }}</td>
      </tr>
      <tr>
        <td>交车地点</td>
        <td>{{ model.deliveryAddr }}</td>
        <td>交车时间</td>
        <td>{{ model.deliveryTime | filterTime(model.deliveryTime) }}</td>
      </tr>

      <tr>
        <th colspan="4">车辆信息</th>
      </tr>
      <tr>
        <td>车架号(vin码)</td>
        <td>{{ model.carVin }}</td>
        <td>发动机号</td>
        <td>{{ model.engineNumber }}</td>
      </tr>
      <tr>
        <td>品牌及规格型号</td>
        <td>{{ model.carBrandNumber }}</td>
        <td>动力蓄电池组编号</td>
        <td>{{ model.batteryNumber }}</td>
      </tr>
      <tr>
        <td>外饰颜色</td>
        <td>{{ model.carColor }}</td>
        <td>内饰颜色</td>
        <td>{{ model.interiorColor }}</td>
      </tr>

      <tr>
        <th colspan="4">交易信息("机动车销售统一发票"信息)</th>
      </tr>
      <tr>
        <td>开票日期</td>
        <td>{{ model.invoiceTime | filterTime(model.invoiceTime) }}</td>
        <td>发票代码</td>
        <td>{{ model.invoiceCode }}</td>
      </tr>
      <tr>
        <td>发票号码</td>
        <td>{{ model.invoiceNumber }}</td>
        <td>不含税价</td>
        <td>{{ model.excludingTaxPrice }}</td>
      </tr>
      <tr>
        <td>价税合计</td>
        <td>{{ model.invoicePrice | filterNumber(model.invoicePrice) }}</td>
        <td>总实收</td>
        <td>{{ model.receivedamount }}</td>
      </tr>

      <tr>
        <th colspan="4">交付方信息</th>
      </tr>
      <tr>
        <td>企业名称</td>
        <td>{{ model.enterpriseName }}</td>
        <td>交付专员</td>
        <td>{{ model.salesName }}</td>
      </tr>
      <tr>
        <td>交付专员联系电话</td>
        <td>{{ model.salesPhone }}</td>
        <td colspan="2"></td>
      </tr>

      <tr>
        <th colspan="4">接收方信息</th>
      </tr>
      <tr>
        <td>接收方姓名</td>
        <td>{{ model.buyerName }}</td>
        <td>接收方手机号码</td>
        <td>{{ model.buyerPhone }}</td>
      </tr>
      <tr>
        <td>接收方证件类型</td>
        <td v-if="model.pinType == 1">身份证</td>
        <td v-else-if="model.pinType == 2">护照</td>
        <td v-else-if="model.pinType == 3">士兵证军官证</td>
        <td v-else-if="model.pinType == 4">港澳居民居住证</td>
        <td v-else-if="model.pinType == 5">港澳居民来往内地通行证</td>
        <td v-else-if="model.pinType == 6">台湾居民居住证</td>
        <td v-else-if="model.pinType == 7">台湾居民来往大陆通行证</td>
        <td v-else-if="model.pinType == 8">外国人永久居留身份证</td>
        <td v-else-if="model.pinType == 9">其他有效身份证明</td>
        <td v-else>{{ model.pinType }}</td>
        <td>接收方证件号码</td>
        <td>{{ model.pinNumber }}</td>
      </tr>

      <tr>
        <th colspan="4">交付清单</th>
      </tr>
      <tr>
        <td colspan="4">{{ model.deliverContents }}</td>
      </tr>

      <tr>
        <th colspan="4">随车附件</th>
      </tr>
      <tr>
        <td colspan="4">{{ model.accessoriesContents }}</td>
      </tr>
      <tr v-if="model.accessoriesContentsPic1 || model.accessoriesContentsPic2">
        <td colspan="4">
          <div style="display: flex;justify-content: flex-start;padding: 10px 20px">
            <img
              v-if="model.accessoriesContentsPic1"
              :src="'data:image/' + model.accessoriesContentsType1 + ';base64,' + model.accessoriesContentsPic1"
              alt
              style="margin-right: 10px; cursor: pointer;"
              width="100"
              @click="showImage(model.accessoriesContentsPic1,model.accessoriesContentsType1)"
            />
            <div v-if="showMask" :style="maskStyle" style="position: fixed;" @click="cancelMask">
              <img :src="maskImage" :style="maskImageStyle">
            </div>
            <img
              v-if="model.accessoriesContentsPic2"
              :src="'data:image/' + model.accessoriesContentsType2 + ';base64,' + model.accessoriesContentsPic2"
              alt
              style="cursor: pointer;"
              width="100"
              @click="showImage(model.accessoriesContentsPic2,model.accessoriesContentsType2)"
            />
          </div>
        </td>
      </tr>
    </table>
  </a-card>
</template>

<script>
import moment from 'moment'

export default {
  name: 'deliveryInfo',
  props:{
    model:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      confirmLoading: false,
      url: {
        add: '/cxm/cxmDeliverManager/add',
        edit: '/cxm/cxmDeliverManager/edit'
      },
      showMask: false,
      maskStyle: {
        top: '0px',
        left: '0px',
        width: window.innerWidth + 'px',
        height: window.innerHeight + 'px',
        background: 'rgba(0,0,0,0.5)'
      },
      maskImage: '',
      maskImageStyle: {}
    }
  },
  methods: {
    // handleCancel() {
    //   if (!this.showMask) {
    //     this.close()
    //   }
    //   this.showMask = false
    //   this.maskImage = ''
    // },
    showImage(value, value2) {
      this.showMask = true
      this.maskImage = 'data:image/' + value2 + ';base64,' + value
      if (window.innerHeight > window.innerWidth) {
        this.maskImageStyle = {
          width: window.innerWidth + 'px',
          position: 'absolute',
          top: '50%',
          transform: 'translateY(-50%)'
        }
      } else {
        this.maskImageStyle = {
          height: window.innerHeight + 'px',
          position: 'absolute',
          left: '50%',
          transform: 'translateX(-50%)'
        }
      }
    },
    cancelMask() {
      this.showMask = false
      this.maskImage = ''
    }
  },
  filters: {
    filterTime(time) {
      return time? moment(time).format('YYYY-MM-DD'):''
    },
    filterNumber(value) {
      return value? Number(value).toFixed(2) + '元':''
    },
  }
}
</script>

<style lang="less" scoped>
.delivery-table {
  width: 1100px;
  margin: 10px auto;
}

.delivery-table tr th {
  height: 30px;
  border: 1px solid #000;
  background-color: #e6e6e6;
  padding-left: 5px;
}

.delivery-table tr td {
  height: 30px;
  border: 1px solid #000;
  min-width: 80px;
  text-align: center;
}
</style>
